<template>
	<view style="">
	<!-- 	<view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-between-wrapper'>
				<text class='iconfont icon-sousuo2'></text>
				<input type='text' :value='keyword' 
				 placeholder='查找线路' 
				placeholder-class='placeholder' @confirm="searchAll"
				maxlength="20"></input>
			</view>
		</view> -->
		<view class="notic-sc display-flex display-flex-align-center">
			<view class="shu-sc"></view>
			<text class="notice-text">请选择校区</text> 
		</view>
		<view class="display-flex display-flex-flex-wrap display-flex-align-center display-flex-justify-center">
			<view @click="golineList(item)" class="sc-block shadow" v-for="(item, index) in schoolList">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view v-if="schoolList" class="all-sc display-flex  display-flex-align-center display-flex-justify-center">
			<text>已加载全部学校</text>
		</view>
	</view>	
</template>

<script>
	import {getSchoolList} from '@/api/bus.js'

	 
	export default {
		components:{  },
		data() {
			return {
				 schoolList: [],
				 filterData:[
					[
						{ text: '校区筛选', value: '' }, 
						{ text: '师大附中', value: '师大附中'},
						{ text: '花溪大学城', value: '大学城' }, 
						{ text: '博雅实验学校', value: '博雅' },
						{ text: '贵阳六中', value: '贵阳六中' }, 
						{ text: '乐湾国际学校', value: '乐湾'}],
					[
						{ text: '座位类型', value: '' }, 
						{ text: '一人一座', value: 1 }, 
						{ text: '不限座', value: 2 }, 
						]
				],
				defaultIndex:[0,0],
				focus: false,
				searchList: [],
				resultList:[],
				type: 1,
				keyword: '',
				dzSearchFrom:{
					page:1,
					limit:50,
					trait:0,
				},
				searchFrom:{
					keyword:'',
					page:1,
					limit:10,
					trait:0,
				},
				searchLineList: [],
				loadStatus: ['上拉加载更多'],
				trait_desc:'',
				content:'',
				height: 0
				
			}
		},
		onLoad(option) {	
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.height = res.windowHeight
				}
			})
			this.trait_desc = option.trait_desc
			
			

		},
		onReady() {
			this.initSearch()
			
		},
		methods:{
			golineList(item){
				uni.navigateTo({
					url: '/pages/bus/line_list/index?trait=1&trait_desc=校园线路&keyword='+item.shortName
				})
			},
			onSelected(e){
				console.log(32323,e[0][0]['value'])
				
				this.searchFrom.page = 1
				this.searchLineList = []
				this.searchFrom.keyword = e[0][0]['value']
				this.searchFrom.seat_type =  e[1][0]['value']?e[1][0]['value']:''
				this.initSearch(this.searchFrom) 
				
			},
			initSearch(data){
				var that = this
			
				getSchoolList({page:1 ,limit: 100}).then(res => {
					this.$set(this,'schoolList', res.data.list)
					
			    }).catch(err =>{
				})
			},
			reachBottom(){
				console.log(222)
				this.loadStatus.splice(0,1,"正在加载中")
				setTimeout(() => {
					this.initSearch(this.searchFrom)
				}, 200);
				this.searchFrom.page++
			},
			
			
			searchAll(e){
				this.$set(this, 'keyword', e.detail.value);
				let that = this;
				that.focus = false;
				that.dzSearchFrom.page = 1
				that.searchList = []
				that.page = 1;
				
				that.dzInitSearch(this.dzSearchFrom)
			
				
			},
			
			inSearch(e){
				this.$set(this, 'keyword', e.detail.value);
			},
			
			dzInitSearch(data){
				var that = this
				
				data.keyword = this.keyword
				searchLine(data).then(res => {
				//	that.$refs.loading.close()		
					uni.hideLoading()
					if(res.data.list.length)
					 {
						 res.data.list.forEach(function(item){
							  that.searchList.push(item);
						 })
					 }
					if(that.searchList.length!=0){
						if(res.data.total<=that.searchList.length){
							 that.loadStatus.splice(0,1,"nomore")		
							return		
						 }
					}
			    }).catch(err => {
				    uni.hideLoading()
			    })
			},
			
			// 废弃
			goLineDetail(item){
				uni.navigateTo({
					url: '/pages/bus/line_detail/index?line_id='+item.line_id
				})
			},
			goRegulatList:function(line_id){
				// var date =  _formatDate("yyyy-MM-dd")
				// uni.navigateTo({
				// 	url:'/pages/bus/regular_list/index?line_id='+line_id+'&date='+date
				// })
				uni.navigateTo({
					url:'/pages/bus/regular_list/index?line_id='+line_id
				})
			},
			goDz(){
				uni.navigateTo({
					url:"/pages/bus/ogz_line/index"
				})
			},
			goAllLine(){
				uni.navigateTo({
					url:"/pages/bus/all_line/index"
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	
	.list-title{
		margin: 24rpx 24rpx;
		color: #007aff;
		font-weight: 700;
	}
	.list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.search-empty{
		position: absolute;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.map-wrap{
		    height: 44px;
		    line-height: 44px;
	   left: 0;
	   top: 0;
	   width: 750rpx;
	   z-index: 9999;
	   text-align: center;
	   transition: 300ms;		
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		min-width: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding-top: 20px;
		height: 44px;
		line-height: 44px;
	}
	.nav-button{
		height: 61rpx;
		width: 178rpx;
		display: flex;
		margin-left: 16rpx;
		align-items: center;
		position: relative;
		border-radius: 32rpx;
		background: #ffffff;
		border-color: #dedede!important;

	}
	.nav-button::before {
	    content: " ";
	    position: absolute;
	    left: 50%;
	    top: 7px;
	    width: 1px;
	    height: 36px;
	    background-color: rgb(223,223,223);
	    transform: scale(.5);
	    transform-origin: 0 0;
	}
	.nav-button::after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 200%;
	    height: 200%;
	    border: 1px solid #eaeaea;
	    transform-origin: 0 0;
	    transform: scale(.5);
	    box-sizing: border-box;
	    border-radius: 32px;
	}
	.na-but{
		display: flex;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.fanhui, .home {
	    height: 100%;
	    flex: 1;
	    display: flex;
	}
	.back_icon {
	    width: 18rpx;
	    height: 33rpx;
	    margin: auto;
	}
	.home_icon {
	    width: 34rpx;
	    height: 32rpx;
	    margin: auto;
	}
	.slot-wrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	.popup-button{
		background-color: #007AFF;
		height: 35px;
		line-height: 35px;
		border-radius: 4px;
		margin: 30px 20px 20px 20px;
		text-align: center;
		color: #FFFFFF;
	}
	
	.down-box {
	    flex: auto;
	    overflow-y: auto;
		padding-bottom: 30px;
	}
	.line-list{
		background-color: #FFFFFF;
	}
	.item{
		padding: 10px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
	}
	.left-box{
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 8px;
		position: relative;
		overflow: hidden;
	}
	.left-box image {
		width: 100%;
		height: 100%;
	}
	.right-box{
		flex: 1;
		overflow: hidden;
	}
	.right-box .name{
		font-weight: 600;
		font-size: 14px;
		color: #333;
		// overflow: hidden;
		// white-space: nowrap;
		text-overflow: ellipsis;
		// height: 15px;
		// line-height: 15px;
	}
	.right-box .name .grade{
		 border-radius: 2px;
		color: #fff;
		font-weight: 700;
		background: linear-gradient(-90deg,#cf7632,#f8b891);
		width: 20px;
		line-height: 15px;
		height: 15px;
		text-align: center;
		font-size: 10px;
		margin-left: 4px;
		padding: 0 2px;
		align-items: center;
		justify-content: center;
	}
	.row{
		display: flex;
		align-items: flex-end;
		margin-bottom: 4px;
	}
	.loc {
		margin-top: 6px;
		color: #5b5b5b;
	}
	.goumai{
		background: #007AFE;
		border-radius: 15px;
		color: #ffffff;
		padding: 3px 10px;
	}
	.fsale{
		color: #c5c3c3;
		font-size: 12px;
		margin-left: auto;
		margin-right: 5px;
	}
	.loadingtext{
		padding: 10px 0;
		text-align: center;
		color: #807e7e;
	}
	
	
	.search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}
	
	.search {
		padding-top: 20rpx;
	}
	
	.search .input {
		margin-bottom: 10px;
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
		width: 95%;
	}
	
	.search .input input {
		flex:1;
		font-size: 26rpx;
		font-size: 26rpx;
		margin-left: 20px;
	}
	
	.search .input .placeholder {
		color: #bbb;
	}
	
	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}
	
	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
	
	
	.b-title{
		font-size: 16px;
		font-weight: 700;
		margin: 10px;
	}
	.histroy-list-item{
			display: flex;
			align-items: center;
			align-content: center;
			
			.histroy-item-icon{
				margin-right: 30rpx;
				// background-color: green;
				.icon-qichezhan{
					font-size: 40rpx;
					color: #707070;
				}
				.icon-gongjiaozhanpai{
					font-size: 50rpx;
					color: #707070;
				}
			}
			.histroy-item-text{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				padding: 20rpx 0rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.rtbus-busroute-label{
				}
				.rtbus-desc-label{
					padding-top: 4rpx;
					color: #9d9d9d;
					font-size: 12px;
				}
			}
		}
	.fen-line{
		height: 5px;
		width: 100%;
		background-color: #ebebeb;
	}
	.searchblock{
		background-color: #ffffff;
	}
	
	.sc-block{
		width: 43%;
		background-color: #fff;
		padding: 10px;
		margin: 8px;
		border-radius: 5px;
	}
	
	.all-sc{
		height: 35px;
		color: #8c8c8c;
	}
	
	.notice-text{
		color: #007aff;
		font-weight: 700;
	}
	.shu-sc{
		width: 5px;
		height: 12px;
		background-color: #007aff;
		border-radius: 5px;
		margin: 0 5px;
	}
	.notic-sc{
		margin: 10px;
	}
</style>